<template>
  <view class="container">
    <global-loading />

    <!-- 评论详情 -->
    <view class="evaluate-contentbox">
      <view class="evaluate-content flex-items flex-row flex-sp-between">
        <view class="flex-items">
          <image
            class="user-headSmallImg"
            v-if="commentVOList.headImage"
            :src="commentVOList.headImage"
          ></image>
          <image
            class="user-headSmallImg"
            :src="`${VUE_APP_STATIC_URL}ui-static/images/storeIcon.png`"
            v-else
          ></image>
          <label class="fs28 mar-left-20" v-if="commentVOList.name">{{
            commentVOList.name
          }}</label>
          <label class="fs28 mar-left-20" v-else>匿名</label>
        </view>
        <label class="font-color-999 fs22">{{
          commentVOList.createTime
        }}</label>
      </view>
      <view class="fs22 font-color-999 mar-top-10">
        {{ commentVOList.value }}
      </view>
      <view class="goodsDes-box flex-column-plus mar-top-30">
        <view class="flex-row-plus" @click="goGoodsDetails">
          <image class="goodsDes-img" :src="commentVOList.productImage"></image>
          <view class="goodsDesText-box flex flex-column justify-between">
            <label class="goodsDes-text u-line-2">{{commentVOList.productName}}</label>
            <label style="font-size: 24rpx;">¥ {{ commentVOList.productPrice }}</label>
          </view>
        </view>
      </view>
      <view class="fs26 pad-topbot-20">{{ commentVOList.comment }}</view>
      <view class="evaluateImg-box" v-if="commentVOList.image">
        <view
          v-for="(cItem, index) in imageList"
          :key="index"
          @click="previewImg(1, index)"
        >
          <image class="evaluate-Img" :src="cItem"></image>
        </view>
      </view>
      <view
        class="addComments-box flex-column-plus"
        v-if="commentVOList.addComment"
      >
        <label class="mar-top-30" style="color: #ff5000">用户追评</label>
        <label class="mar-top-20">{{ commentVOList.addComment }}</label>
        <view class="evaluateImg-box mar-top-20" v-if="commentVOList.addImage">
          <view
            v-for="(dItem, index) in imgDataResult"
            :key="index"
            @click="previewImg(2, index)"
          >
            <image class="evaluate-Img" :src="dItem"></image>
          </view>
        </view>
      </view>
    </view>
    <!--    {{commentVOList}}-->
    <view class="linkBox">
      <view class="butBox flex-row-plus" v-if="commentVOList.addComment != ''">
        <view class="addPraise-box1 flex-items-plus" @click="zanTap">
          <u-icon
            v-if="!commentVOList.ifLike"
            name="thumb-up"
            color="#ddd"
            size="28"
          ></u-icon>
          <u-icon
            v-else
            name="thumb-up-fill"
            color="#ff5000"
            size="28"
          ></u-icon>
          <label
            class="mar-left-10"
            :style="{
              color: commentVOList.ifLike ? '#ff5000' : '#ddd',
            }"
          >
            点赞
          </label>
        </view>
      </view>
      <view class="butBox flex-row-plus" v-else>
        <view
          class="addComments-box flex-items-plus"
          @click="addCommentsClick()"
        >
          <u-icon name="edit-pen" color="#fff" size="28"></u-icon>
          <label class="mar-left-10 font-color-fff">追加评价</label>
        </view>
        <view
          class="addPraise-box flex-items-plus"
          @click="zanTap"
          :style="{ borderColor: commentVOList.ifLike ? '#ff5000' : '#ddd' }"
        >
          <u-icon
            v-if="!commentVOList.ifLike"
            name="thumb-up"
            color="#ddd"
            size="28"
          ></u-icon>
          <u-icon
            v-else
            name="thumb-up-fill"
            color="#ff5000"
            size="28"
          ></u-icon>
          <label
            class="mar-left-10"
            :style="{
              color: commentVOList.ifLike ? '#ff5000' : '#ddd',
            }"
          >
            点赞
          </label>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { VUE_APP_STATIC_URL } from "@/config/api";
import { request } from "@/utils/request";
import API from "@/config/api";
import { ref } from "vue";
import { onBackPress, onLoad } from "@dcloudio/uni-app";
const commentVOList = ref({});
const actionType = ref(true);
const imgDataResult = ref([]);
const imageList = ref([]);

onLoad(() => {
  commentVOList.value = uni.getStorageSync("commentVOList");
  uni.removeStorageSync("commentVOList");
  commentImgData(commentVOList.value.image);
  imgDataResultData(commentVOList.value.addImage);
});
// onBackPress(e=>{
//   if (e.from === 'navigateBack') {
//     return false;
//   }
//   back();
//   return true;
// })

function goGoodsDetails() {
  let shopId = commentVOList.value.shopId;
  let productId = commentVOList.value.productId;
  let skuId = commentVOList.value.skuId;
  uni.navigateTo({
    url:
      "goodsDetails?shopId=" +
      shopId +
      "&productId=" +
      productId +
      "&skuId=" +
      skuId,
  });
}

function back() {
  uni.navigateTo({
    url: "userEvaluate",
  });
}

function commentImgData(imgData) {
  imageList.value = imgData.split(",");
}

function imgDataResultData(imgData) {
  imgDataResult.value = imgData.split(",");
}

//点赞
function zanTap() {
  // uni.showLoading({
  //   title:''
  // })
  actionType.value = commentVOList.value.ifLike == 1 ? 0 : 1;
  request(
    API.LikeOrUnLikeComment,
    {
      commentId: commentVOList.value.commentId,
      ifLike: actionType.value,
    },
    "POST"
  )
    .then((res) => {
      commentVOList.value.ifLike = !commentVOList.value.ifLike;
      commentVOList.value.likes = commentVOList.value.ifLike
        ? commentVOList.value.likes + 1
        : commentVOList.value.likes - 1;
      if (actionTyp.value == 1) {
        uni.showToast({
          title: "点赞成功",
        });
      } else {
        uni.showToast({
          title: "已取消点赞",
          icon: "none",
        });
      }

      // 重刷页面数据
    })
    .catch((res) => {
      uni.hideLoading();
    })
    .finally(() => {
      uni.hideLoading();
    });
}

//追加评论
function addCommentsClick() {
  uni.setStorageSync("addCommentVOList", commentVOList.value);
  uni.navigateTo({
    url: "addEvaluate?type=2",
  });
}

// 预览图片多张
function previewImg(type, index) {
  let imgsArray = [];
  if (type === 1) {
    for (let i = 0; i < imageList.value.length - 1; i++) {
      imgsArray.push(imageList[i]);
    }
  } else {
    for (let i = 0; i < imgDataResult.value.length - 1; i++) {
      imgsArray.push(imgDataResult.value[i]);
    }
  }
  uni.previewImage({
    current: index,
    urls: imgsArray,
  });
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 30upx;
  .evaluate-contentbox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30upx 30upx;
    background-color: #ffffff;
    .evaluate-content {
      width: 670upx;
      display: flex;
      justify-content: space-between;
      .user-headSmallImg {
        width: 46upx;
        height: 46upx;
        border-radius: 50%;
      }
    }
    .evaluateImg-box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -9upx;
      .evaluate-Img {
        width: 224upx;
        height: 224upx;
        border-radius: 10upx;
        margin-left: 9upx;
        margin-top: 9upx;
      }
    }
    .goodsDes-box {
      background-color: #f7f7f7;
      padding: 20upx 44upx 20upx 20upx;
      border-radius: 10rpx;
      .goodsDes-img {
        width: 88upx;
        height: 88upx;
        border-radius: 10upx;
      }
      .goodsDesText-box {
        width: 416upx;
        margin-left: 30upx;
        .goodsDes-text{
          color: #6C6C6C;
          font-size: 20rpx;
        }
      }
      .addCommentsBut {
        width: 150upx;
        height: 56upx;
        border: 1upx solid #ff7800;
        border-radius: 28upx;
        font-size: 26upx;
        line-height: 56upx;
        text-align: center;
        color: #ff7800;
      }
      .praise-box {
        .praise-icon {
          width: 36upx;
          height: 36upx;
        }
      }
    }
    .addComments-box {
      border-top: 1upx solid #eeeeee;
      margin-top: 35upx;
    }
  }
  .butBox {
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    .addComments-box {
      height: 78rpx;
      width: 330rpx;
      background: linear-gradient(90deg, #ff9000, #ff5000);
      border-radius: 78rpx;
      color: #ffffff;
      .addComments-cion {
        width: 50upx;
        height: 50upx;
      }
    }
    .addPraise-box {
      height: 78rpx;
      border-radius: 78rpx;
      width: 330upx;
      background: #ffffff;
      border: 2rpx solid #ddd;
      .addPraise-icon {
        width: 50upx;
        height: 50upx;
      }
    }
    .addPraise-box1 {
      height: 100upx;
      width: 690upx;
      background: linear-gradient(90deg, #ff9000, #ff5000);
      color: #ffffff;
      .addPraise-icon {
        width: 50upx;
        height: 50upx;
      }
    }
  }
}
.linkBox {
  position: absolute;
  bottom: 20upx;
  width: 100%;
}
</style>
